<template>
  <Modal v-model="modalVisible" title="一键告警" @on-cancel="modalManiCancel" width="1100">
    <div class="modal-add">
      <Form ref="modalForm" :model="modalForm" :rules="modalRules" :label-width="80" label-position="left">
       <FormItem label="收信人" :required="true">
          <Row :gutter="10" v-for="receiver in receiverList" :key="receiver.id" class="fold-list-item">
            <Col :span="8">
              <Input v-model="receiver.email" placeholder="admin@chalco-steering.com"></Input>
            </Col>
            <Col :span="3">
              <Icon type="ios-remove-circle-outline" v-if="receiverList.length > 1" class="remove-icon" @click="minusItem(receiver)" />
            </Col>
          </Row>
          <Button type="primary" @click="addItem"><Icon type="md-add"></Icon> 添加收信人</Button>
        </FormItem>
        <!-- <FormItem label="告警列表">

        </FormItem> -->
        <div class="u-alert-list">告警列表：</div>
        <div class="zl-page-loading" v-if="isInitLoading">
          <Spin fix></Spin>
        </div>
        <Table :columns="columns" :data="alertList" v-else></Table>
      </Form>
    </div>
    <div slot="footer">
      <Button type="warning" @click="modalManiCancel">取消</Button>
      <Button type="primary" :loading="isLoading" @click="modalManiConf">确定</Button>
    </div>
  </Modal>
</template>
<script type="text/javascript">
import uuid from 'uuid/v4'
import Fetch from '@/api/request'
export default {
  data() {
    return {
      modalForm: {
        id: ''
      },
      isLoading: false,
      isInitLoading: true,
      modalRules: {
      },
      modalVisible: false,
      receiverList: [{
        id: uuid(),
        email: ''
      }],
      FREQUENCYS: [{
        label: '1分钟',
        value: '1m'
      }, {
        label: '5分钟',
        value: '5m'
      }, {
        label: '15分钟',
        value: '15m'
      }, {
        label: '30分钟',
        value: '30m'
      }, {
        label: '1小时',
        value: '1h'
      }, {
        label: '6小时',
        value: '6h'
      }, {
        label: '12小时',
        value: '12h'
      }],
      AGGREGATIONES: [{
        label: '平均值',
        value: 'AVG'
      }, {
        label: '最小值',
        value: 'MIN'
      }, {
        label: '最大值',
        value: 'MAX'
      }, {
        label: '求和',
        value: 'SUM'
      }, {
        label: '总数',
        value: 'COUNT'
      }, {
        label: '变化量',
        value: 'STATS'
      }, {
        label: '平均速率',
        value: 'AVGSPEED'
      }],
      ALARM_RULE: [{
        label: '大于',
        value: 'GT'
      }, {
        label: '大于等于',
        value: 'GTE'
      }, {
        label: '小于',
        value: 'LT'
      }, {
        label: '小于等于',
        value: 'LTE'
      }, {
        label: '等于',
        value: 'EQ'
      }, {
        label: '区间',
        value: 'BETWEEN'
      }, {
        label: '空值',
        value: 'NULL'
      }],
      ALERT_LEVEL: [{
        label: '危险',
        value: 'danger'
      }, {
        label: '警告',
        value: 'warning'
      }, {
        label: '普通',
        value: 'ordinary'
      }],
      alertDetail: {},
      alertList: [],
      columns: [{
        type: 'index',
        width: 50
      }, {
        title: '模块',
        key: 'describe'
      }, {
        title: '告警等级',
        width: 80,
        render: (h, params) => {
          let alertLabel = '-'
          for (let i = 0; i < this.ALERT_LEVEL.length; i++) {
            const alert = this.ALERT_LEVEL[i]
            if (alert.value === params.row.alarmLevel) {
              alertLabel = alert.label
            }
          }
          return h('span', alertLabel)
        }
      }, {
        title: '查询频率',
        width: 80,
        render: (h, params) => {
          let fqLabel = '-'
          for (let i = 0; i < this.FREQUENCYS.length; i++) {
            const fq = this.FREQUENCYS[i]
            if (fq.value === params.row.suggestQueryFrequence) {
              fqLabel = fq.label
            }
          }
          return h('span', fqLabel)
        }
      }, {
        title: '聚合方式',
        width: 80,
        render: (h, params) => {
          let aggLabel = '-'
          for (let i = 0; i < this.AGGREGATIONES.length; i++) {
            const agg = this.AGGREGATIONES[i]
            if (agg.value === params.row.suggestAggMethod) {
              aggLabel = agg.label
            }
          }
          return h('span', aggLabel)
        }
      }, {
        title: '告警规则',
        width: 80,
        render: (h, params) => {
          let alarmLabel = '-'
          for (let i = 0; i < this.ALARM_RULE.length; i++) {
            const rule = this.ALARM_RULE[i]
            if (rule.value === params.row.suggestRuleEnum) {
              alarmLabel = rule.label
            }
          }
          return h('span', alarmLabel)
        }
      }, {
        title: '阈值',
        width: 80,
        render: (h, params) => {
          let ret = ''
          if (params.row.suggestAlertValue) {
            ret += params.row.suggestAlertValue + params.row.unit
          }
          return h('span', ret)
        }
      }, {
        title: '选项',
        width: 400,
        render: (h, params) => {
          return h('div', params.row.options)
        }
      }]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  mounted() {
  },
  methods: {
    // 确定操作
    modalManiConf() {
      // 判断是否已填写至少一个邮件
      if (this.receiverList.length === 1 && this.receiverList[0].email === '') {
        this.$Message.warning({
          content: '请填写收信人邮箱！',
          duration: this.DURATION
        })
        return
      }
      let emails = ''
      for (let i = 0; i < this.receiverList.length; i++) {
        const receiver = this.receiverList[i]
        if (i === 0) {
          emails += receiver.email
        } else {
          emails += ',' + receiver.email
        }
      }
      this.isLoading = true
      Fetch.put({
        url: '/api/scheduler-job/alert/init/' + emails
      }).then((res) => {
        if (res && res.code === '0') {
          this.$Message.success({
            content: '一键告警成功！',
            duration: this.DURATION
          })
          this.$emit('update:visible', false)
          this.$emit('finish')
        } else {
          this.$Message.warning({
            content: res.message,
            duration: this.DURATION
          })
        }
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
        this.$Message.error(err.message)
      })
    },
    // 取消操作
    modalManiCancel() {
      this.$emit('update:visible', false)
    },
    // 减少收信人
    minusItem(receiver) {
      // 至少有一个收信人
      if (this.receiverList.length === 1) {
        return
      }
      this.receiverList = this.receiverList.filter((item) => {
        return item.id !== receiver.id
      })
    },
    // 添加收信人
    addItem() {
      // 用于限制无限制添加
      if (this.receiverList.length > 50) {
        this.$Message.info({
          content: '路径列表数量不能超过50个',
          duration: this.DURATION
        })
        return
      }
      this.receiverList.push({
        id: uuid(),
        email: ''
      })
    },
    // 获取告警列表
    getAlertList() {
      Fetch.get({
        url: '/api/scheduler-job/alert/initMetaList'
      }).then((res) => {
        if (res && res.code === '0') {
          this.alertList = res.data
        } else {
          this.$Message.warning({
            content: res.message,
            duration: this.DURATION
          })
        }
        this.isInitLoading = false
      }).catch((err) => {
        this.isInitLoading = false
        this.$Message.error(err.message)
      })
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
      this.getAlertList()
      if (val) {
        this.modalForm = Object.assign({}, this.form)
        this.$refs.modalForm.resetFields()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.u-alert-list {
  margin-bottom: 8px;
}
</style>
